<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑博客</title>
    <link rel="stylesheet" href="../css/edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
    <div class="nav">
        <img src="../img/logo.jpg" alt="Logo">
        <span>我的博客系统</span>
        <span class="space"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html" class="active">写博客</a>
        <a href="https://www.baidu.com/">注销</a>
    </div>
    
    <div class="edit-container">
        <div class="edit-header">
            <input type="text" id="blogTitle" placeholder="请输入博客标题">
            <div class="actions">
                <select id="blogCategory">
                    <option value="tech">技术</option>
                    <option value="life">生活</option>
                    <option value="thoughts">随笔</option>
                    <option value="tutorial">教程</option>
                </select>
                <button id="saveDraftBtn">保存草稿</button>
                <button id="publishBtn">发布文章</button>
            </div>
        </div>
        
        <div id="editor" class="editor-container"></div>
        
        <div class="status-bar">
            <span id="wordCount">字数: 0</span>
            <span id="saveStatus">未保存</span>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script>
        // 初始化编辑器
        let editor = editormd('editor', {
            width: '100%',
            height: 'calc(100vh - 160px)',
            path: './editor.md/lib/',
            markdown: localStorage.getItem('blogDraft') || '### 开始编写博客...',
            autoFocus: true,
            theme: 'dark',
            previewTheme: 'dark',
            editorTheme: 'pastel-on-dark',
            codeFold: true,
            syncScrolling: true,
            saveHTMLToTextarea: true,
            searchReplace: true,
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true,
            flowChart: true,
            sequenceDiagram: true,
            imageUpload: true,
            imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
            imageUploadURL: './upload.php',
            
            // 编辑器加载完成后的回调
            onload: function() {
                console.log('编辑器加载完成');
                updateWordCount();
            },
            
            // 内容改变时的回调
            onChange: function() {
                updateWordCount();
                saveDraftAutomatically();
            }
        });

        // 更新字数统计
        function updateWordCount() {
            const content = editor.getMarkdown();
            const count = content ? content.replace(/\s+/g, '').length : 0;
            document.getElementById('wordCount').textContent = `字数: ${count}`;
        }

        // 自动保存草稿
        function saveDraftAutomatically() {
            const title = document.getElementById('blogTitle').value;
            const content = editor.getMarkdown();
            const category = document.getElementById('blogCategory').value;
            
            const draft = {
                title,
                content,
                category,
                lastModified: new Date().toLocaleString()
            };
            
            localStorage.setItem('blogDraft', content);
            localStorage.setItem('blogDraftMeta', JSON.stringify({
                title,
                category,
                lastModified: draft.lastModified
            }));
            
            const saveStatus = document.getElementById('saveStatus');
            saveStatus.textContent = '已自动保存';
            saveStatus.classList.add('saved');
            
            setTimeout(() => {
                saveStatus.classList.remove('saved');
            }, 2000);
        }

        // 手动保存草稿
        document.getElementById('saveDraftBtn').addEventListener('click', function() {
            saveDraftAutomatically();
            alert('草稿已保存');
        });

        // 发布文章
        document.getElementById('publishBtn').addEventListener('click', function() {
            const title = document.getElementById('blogTitle').value.trim();
            const content = editor.getMarkdown();
            
            if (!title) {
                alert('请输入博客标题');
                return;
            }
            
            if (!content || content === '### 开始编写博客...') {
                alert('请输入博客内容');
                return;
            }
            
            // 这里可以添加实际的发布逻辑，如发送到服务器
            const confirmPublish = confirm('确定要发布这篇博客吗？');
            if (confirmPublish) {
                // 模拟发布成功
                alert('博客发布成功！');
                
                // 清除草稿
                localStorage.removeItem('blogDraft');
                localStorage.removeItem('blogDraftMeta');
                
                // 跳转到博客列表页
                window.location.href = 'blog_list.html';
            }
        });

        // 加载草稿
        function loadDraft() {
            const draftMeta = JSON.parse(localStorage.getItem('blogDraftMeta'));
            if (draftMeta) {
                document.getElementById('blogTitle').value = draftMeta.title || '';
                document.getElementById('blogCategory').value = draftMeta.category || 'tech';
                
                // 显示最后修改时间
                const saveStatus = document.getElementById('saveStatus');
                saveStatus.textContent = `上次保存: ${draftMeta.lastModified}`;
            }
        }

        // 页面加载时加载草稿
        document.addEventListener('DOMContentLoaded', function() {
            loadDraft();
        });
    </script>
</body>
</html>